<script setup lang="ts">
import ViewCockpitBase from './view-cockpit-base.vue'
import type { CockpitOneParams } from './type'

defineOptions({
  inheritAttrs: false,
})
withDefaults(defineProps<CockpitOneParams>(), {
  size: () => ({ width: 1920, height: 1080 }),
  title: '驾驶舱标题',
  subtitle:
    'ＨＯＳＰＩＴＡＬ　ＤＡＴＡ　ＶＩＳＵＡＬＩＺＡＴＩＯＮ',
})
// ------------------use------------------
// #region
const { isFullscreen, toggle } = useFullscreen()
const [timeDate, timeStart, end] = usePolling(getTime, {
  wait: 1000,
})
const [isMount, setIsMount] = useState(false)
// #endregion
// ------------------静态变量------------------
// #region
const WEEK = ['日', '一', '二', '三', '四', '五', '六']
// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region
const videoRef = ref<HTMLVideoElement>()

const userStore = useUserStore()
const rootPath = computed(() => {
  return userStore.rootPath
})
const designStore = useDesignStore()

onBeforeUnmount(() => {
  designStore.switchTheme('light')
})
onMounted(() => {
  designStore.switchTheme('dark')
})
// #endregion
// ------------------reactive------
// #region

// #endregion
// ------------------computed------
// #region

// #endregion
// ------------------生命周期------------------
// #region
onActivated(() => {
  timeStart()
})
onDeactivated(() => {
  end()
})
onBeforeUnmount(() => {
  end()
})
onMounted(() => {
  bindEvent()
  timeStart()
})
// #endregion
// ------------------内置方法---------------------
// #region

// #endregion
// ------------------方法---------------------
// #region
function bindEvent() {
  videoRef.value?.addEventListener(
    'loadeddata',
    function () {
      setIsMount(true)
      this.play?.()
    },
  )
}
function getTime() {
  const date = new Date()
  const week = WEEK[date.getDay()]
  const time = formatTime(
    date.getTime(),
    'YYYY-MM-DD hh:mm:ss',
  )
  return `${time} 星期${week}`
}
// #endregion
</script>

<template>
  <ViewCockpitBase v-bind="size">
    <template #default="{ scale }">
      <div
        class="cockpit-container view-cockpit-one"
        :style="{
          '--cockpit-scale': scale,
        }"
      >
        <div
          class="flex-direction height-fill width-fill overflow cockpit-content pointer-none flex"
        >
          <div
            class="width-fill flex-incompressible align-center cockpit-header relative box-border flex justify-between"
          >
            <div
              class="align-center cockpit-header-l pointer-all flex gap-sm"
            >
              <img
                src="@/assets/cockpit/时间图标.png"
                alt=""
              >
              <span>{{ timeDate }}</span>
            </div>

            <div class="cockpit-title">
              {{ title }}
            </div>
            <div class="cockpit-subtitle">
              {{ subtitle }}
            </div>
            <div
              class="pointer-all align-center cockpit-header-r flex gap-sm"
            >
              <p
                v-if="false"
                class="align-center !margin-0 flex gap-sm"
              >
                <img
                  src="@/assets/cockpit/消息图标.png"
                  alt=""
                  srcset=""
                >
                <span>新风设备出现异常</span>
              </p>
              <ElTooltip v-if="false" content="首页" effect="dark">
                <img
                  src="@/assets/cockpit/首页.png"
                  alt=""
                  @click="$router.push('/')"
                >
              </ElTooltip>
              <ElTooltip content="后台系统" effect="light">
                <img
                  src="@/assets/cockpit/系统管理.png"
                  alt=""
                  @click="
                    $router.push(rootPath)
                  "
                >
              </ElTooltip>
              <ElTooltip content="退出全屏" effect="light">
                <img
                  v-show="isFullscreen"
                  src="@/assets/cockpit/退出全屏.png"
                  alt=""
                  @click="toggle"
                >
              </ElTooltip>
              <ElTooltip content="全屏" effect="light">
                <img
                  v-show="!isFullscreen"
                  src="@/assets/cockpit/全屏.png"
                  alt=""
                  @click="toggle"
                >
              </ElTooltip>
              <ElTooltip content="退出" effect="light">
                <img
                  src="@/assets/cockpit/退出.png"
                  alt=""
                  @click="userStore.logout"
                >
              </ElTooltip>
            </div>
          </div>
          <!-- 内容 -->
          <div
            v-bind="$attrs"
            class="overflow flex-fillRemaining pointer-all cockpit-body box-border"
          >
            <slot />
          </div>
        </div>
        <div
          class="pointer-none height-fill width-fill overflow cockpit-layout"
        >
          <video
            v-show="isMount"
            ref="videoRef"
            autoplay
            loop
            muted
            preload="auto"
            class="height-fill width-fill"
          >
            <source
              src="@/assets/cockpit/bgv.webm"
              type="video/mp4"
            >
            <!-- type="video/webm" -->
          </video>
          <img
            src="@/assets/cockpit/_bg.png"
            alt=""
            srcset=""
            class="width-fill height-fill"
          >
        </div>
        <!-- 场景 -->
        <slot name="scene" />
      </div>
    </template>
  </ViewCockpitBase>
</template>

<style lang="scss">
.view-cockpit-one {
  --color-primary: 188, 227, 255;
}
</style>

<style lang="scss" scoped>
//------------------组件样式------------------
.cockpit {
  &-title {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 33px;
    color: transparent;
    padding-top: 8px;

    background: linear-gradient(
        0deg,
        rgb(139, 207, 254) 31.5%,
        rgb(231, 243, 255) 72%,
        rgb(234, 245, 255) 100%
      )
      text;
  }
  &-subtitle {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%) translateY(20%);
    color: rgba(160, 238, 255, 0.6);
    letter-spacing: -1px;
    font-size: 12px;
  }
  &-header {
    padding-top: var(--cockpit-padding-r);
    padding-inline: var(--cockpit-padding-c);
    height: var(--cockpit-header);
    &-l,
    &-r {
      color: rgba(192, 230, 255, 0.7);
      font-size: 16px;
    }
    &-r img {
      cursor: pointer;
      opacity: 0.9;
    }
  }
  &-body {
    padding: 20px var(--cockpit-padding-c)
      var(--cockpit-padding-r);
  }
  &-container {
    --cockpit-width: 1920px;
    --cockpit-height: 1080px;
    --cockpit-scale: 1;
    --cockpit-header: 64px;
    --cockpit-padding-r: 50px;
    --cockpit-padding-c: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
      scale3d(var(--cockpit-scale), var(--cockpit-scale), 1);
    width: var(--cockpit-width);
    height: var(--cockpit-height);
    // filter: brightness(1.1);
    position: absolute;
  }
  &-body {
    & > div {
      pointer-events: all;
    }
  }
  &-content {
    position: relative;
    z-index: 1;
    // background-image: url('@/assets/cockpit/h.png'),
    //   url('@/assets/cockpit/地图发光.png'),
    //   url('@/assets/cockpit/地图.png'),
    //   url('@/assets/cockpit/bgi1.png');
    background-repeat: no-repeat;
    background-position: center 100px, center 150px,
      center 100px, center 100px;
    width: var(--cockpit-width);
    height: var(--cockpit-height);
  }
  &-layout {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 0;
    & > video {
      // background-image: url('@/assets/cockpit/bgi.png');
      object-fit: fill;
    }
    & > img {
      image-rendering: pixelated;
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: -1;
      // background-image: ;
      background: url('@/assets/cockpit/bgi.png'),
        rgb(28, 34, 42);
    }
  }
}
//-------------样式穿透-------------
</style>
